<template>
  <scroll-view ref="scrollEl" class="scroll-list-container" :style="{ height: height || '500px' }" @scroll="onScroll">
    <slot :items="items" />

    <view class="scroll-loading" v-if="loading">加载中...</view>
    <view class="scroll-nomore" v-else-if="noMore">没有更多了</view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'

defineProps<{
  items: any[]
  loading: boolean
  noMore: boolean
  height?: string
}>()

const emit = defineEmits<{
  (e: 'loadMore'): void
}>()

const scrollEl = ref<HTMLElement | null>(null)

function onScroll() {
  if (!scrollEl.value) return
  const el = scrollEl.value
  console.log(el);
  const bottom = el.scrollHeight - el.scrollTop - el.clientHeight
  if (bottom < 10) {
    emit('loadMore')
  }
}
</script>

<style scoped>
.scroll-list-container {
  overflow-y: auto;
  background: #f5f5f5;
}
.scroll-loading,
.scroll-nomore {
  text-align: center;
  padding: 16px;
  color: #888;
}
</style>
